<template>
  <view>
    <view class="comin">
      <view class="com-top" v-html="caigouDetail.project_desc">
      </view>
      <view class="com-mo">
        <image
          :src="caigouDetail.image"
          mode=""></image>
      </view>
      <view class="btn" @click="popop">成为供应商</view>
    </view>
    <u-popup
	    v-model="show"
	    ref="tianxie"
      mode="center"
      border-radius="15"
      :closeable="true"
      :mask-close-able="false"
    @close="close">
      <view class="popup-box">
        <view class="title">填写资料</view>
        <view class="PB-item">
          <text>公司名称</text>
          <view class="input">
            <u-input
              placeholder="请输入内容"
              border="surround"
              v-model="value"
             ></u-input>
          </view>
        </view>
        <view class="PB-item PB-item1 pe">
          <view style="margin-right: 29rpx;">上传资料</view>
<!--          <view v-for="(el, index) in fileList" :key="index">-->
<!--            <view class="uoloadImg-image">-->
<!--              <image :src="imgUrl + el"-->
<!--                mode=""></image>-->
<!--              -->
<!--            </view>-->
<!--          </view>-->
<!--          <view-->
<!--            class="uoloadImg-box"-->
<!--            @click="openImagePageBuy" v-if="uploadFlag">-->
<!--            <view class="jia">-->
<!--            </view>-->
<!--          </view>-->
	        <u-upload v-if="show" :showProgress="false" @on-uploaded="uploadSuccess" @on-remove="uploadRemove"
	                  :action="`${$BASE_URL}/api/common/upload`" :header="{token: token}" width="138"
	                  height="138" maxCount="3"></u-upload>
        </view>
        <view class="PB-item PB-item2">
          <text>请注意接听客服电话</text>
          <view class="input">
            <text v-for="(item,index) in caigouDetail.kefu">{{ item }}</text>
          </view>
        </view>
        <view class="button" @click="submit">提交</view>
      </view>
    </u-popup>
  </view>
</template>
<script>
import http from "@/shopro/request/index.js";
import view from '../view.vue';
export default {
  data() {
    return {
      show: false,
      value: "",
      id: "",
      caigouDetail: {},
	  uploadFlag:true,
	    imgList:[],
	    token: uni.getStorageSync('token'),
    };
  },
  onLoad(options) {
    this.id = options.id;
    this.getDetail(options.id);
	  uni.setNavigationBarTitle({
		  title:uni.getStorageSync("pageName")
	  })
  },
  methods: {
	  getDetail(id) {
	    http("city.caigouDetail", {
	      id:id,
	    })
	      .then((res) => {
	        console.log(res);
	        this.caigouDetail = res.data;
	      })
	      .catch((err) => {});
	  },
    submit() {
		  var that = this;
      this.$new_http("address.caigouSubmit", {
        caigou_id: this.id,
        project_name: this.value,
        images: this.imgList.join(","),
      })
        .then((res) => {
		  if(res.code == 1){
			  uni.showToast({
			      title: '提交完成',
			      duration: 2000
			  });
			  that.$refs.tianxie.close();
			  that.show = false;
		  }
        })
        .catch((err) => {});
	    that.show = false;
    },
	  // 上传图片成功
	  uploadSuccess(e) {
		  this.imgList = [];
		  console.log(e)
		  e.forEach(item => {
			  this.imgList.push(item.response.data.fullurl);
		  });
	  },
	  // 移除图片
	  uploadRemove(index) {
		  this.imgList.splice(index, 1);
	  },
    popop() {
	    this.value = '';
	    this.imgList = [];
        this.show = true;
    },
    close() {
	    this.show = false;
	    this.value = '';
	    this.imgList = [];
    },
  },
};
</script>

<style lang="scss">
page {
  background-color: #fff;
}
.comin {
  padding: 0 30rpx;
}

.com-top {
  font-family: PingFang;
  font-weight: 500;
  font-size: 32rpx;
  color: #333333;
  line-height: 50rpx;
}

.com-mo {
  width: 100%;
  height: 340rpx;

  image {
    width: 100%;
    height: 340rpx;
  }
}
.jia{
	width: 150rpx;
	height: 150rpx;
	border: 1rpx solid #666;
	margin-left: -60rpx !important;
}
.btn {
  width: 90%;
  height: 90rpx;
  background: #ed861f;
  border-radius: 16rpx;
  font-family: PingFang;
  font-weight: bold;
  font-size: 32rpx;
  color: #ffffff;
  line-height: 90rpx;
  text-align: center;
  position: fixed;
  bottom: 92rpx;
}

.popup-box {
  width: 690rpx;
  padding: 61rpx 42rpx 57rpx 34rpx;

  .title {
    font-family: PingFang;
    font-weight: bold;
    font-size: 32rpx;
    color: #000000;
    width: 100%;
    text-align: center;
    margin-bottom: 40rpx;
  }

  .PB-item {
    display: flex;
    align-items: center;
    //justify-content: space-between;

    text:nth-child(1) {
      font-family: PingFang;
      font-weight: 500;
      font-size: 30rpx;
      color: #666666;
    }

    .input {
      flex: 1;
      padding-left: 36rpx;

      input {
        width: 100%;
      }
    }
  }

  .PB-item1 {
    align-items: flex-start;
    margin-top: 40rpx;

    .input {
      image {
        width: 200rpx;
        height: 200rpx;
      }
    }
  }

  .PB-item2 {
    align-items: flex-start;
    margin-top: 40rpx;

    .input {
      display: flex;
      flex-direction: column;

      text {
        font-family: PingFang;
        font-weight: bold;
        font-size: 30rpx;
        color: #ed861f;
        margin-bottom: 40rpx;
      }
    }
  }

  .button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 360rpx;
    height: 76rpx;
    background: #ed861f;
    border-radius: 16rpx;
    font-family: PingFang;
    font-weight: bold;
    font-size: 32rpx;
    color: #ffffff;
    margin: 22rpx auto 0;
  }
}
</style>